<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>表单输入绑定</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">
  表单输入绑定 — Vue.js<br />
https://cn.vuejs.org/v2/guide/forms.html#选择框的选项<br /><br />


<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

    </div>

    <script>

      // start app
var app = new Vue({
  el: '#app',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' },
      { text: 'abc', value: 'abc' }
    ],
	picked:'b',
	toggle:false
  }
})


    </script>
  </body>
</html>
